<template>
  <!-- 垃圾分类页面 -->
  <view>
    <view class="box" :style="{height: wh + 'px'}">
      <view class="btnbox">
        <view class="text1" @click="toDeatil()">了解详情</view>
        <navigator class="text2" url="/subpkg/refuse-classification-add/refuse-classification-add">分类打卡</navigator>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
        wh: 0,
      };
    },
    onLoad() {
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值   可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
      this.wh = sysInfo.windowHeight 
    },
    methods:{
      toDeatil(){
        uni.navigateTo({
          url:'/subpkg/ljfl-detail/ljfl-detail'
        })
      },
    },
  }
</script>

<style lang="scss">
  .box {
    width: 100%;
    height: 100%;
    background-image: url('https://www.helloimg.com/images/2022/04/02/RJbp0R.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    // z-index: -1;
  }

  .btnbox {
    width: 100%;
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 50rpx;
  }

  .text1,
  .text2 {
    width: 40%;
    height: 100rpx;
    border-radius: 100rpx;
    background-color: #eeb21b;
    color: #333333;
    font-size: large;
    font-weight: bold;
    text-align: center;
    line-height: 100rpx;

  }
</style>
